
<template>
    <!-- 搜索栏 -->
  <div class="search_warp">
      <div class="more" @click="tocatetory"> 三</div>
      <van-search
        background='#f20'
        shape='round'
        v-model="value"
        show-action
        left-icon = "van-icon van-icon-search"
        label="JD"
        placeholder="请输入搜索关键词"
        @click="onSearch"
        @change="search">
        
  <!-- <template #left-icon>
      <div class="jdicon">
          Q
      </div>
  </template> -->
    <template #action >
        <van-icon name="search" size="28" color="#ccc"  @click="onSearch"/>
        <div v-if="!userId" @click="onlogIn">登录</div>
    </template>
</van-search>
  </div>
</template>

<script>
// 公共头部组件 
import {Search} from '../api/common'
export default {
    name:'heads',
    data() {
        return {
            value:'',
            userId:''
        }
    },
    methods: {
        tocatetory(){
            this.$router.push('/category')
        },
        search(){
            this.$store.dispatch('searchName',this.value)
            Search({keywords:this.value,order:"1"}).then(res=>{
                // console.log("搜索数据",res)
                this.$store.dispatch("addSearchList",res.result.data)
                // this.$store.dispatch('changeSearch',true)
                this.value = ""
            })
        },
        onSearch(){
            this.$store.dispatch('changeSearch',false)
        },
        onlogIn(){
            this.$router.push('/login')
        }
    },
    components:{},
    created() {
        this.userId = localStorage.uid
    },
}
</script>

<style lang='less'>
.search_warp{
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: flex-end;
    background-color: #f20;
    z-index: 9999;
}
.van-search__label{
    font-size: 28px;
    color: #f20;
    font-weight: bolder;
}
.more{
    margin-top: 20px;
    width: 60px;
    height: 60px;
    color: white;
    line-height: 60px;
    font-size: 34px;
}
.van-search {
    flex:1
}
.van-field__left-icon .jdicon{
    color: #bbb;
    font-size: 40px;
    margin-left: 10px;
    margin-right: 15px;
}
.van-search .van-search__action{
    display: flex;
    color: white;
    .van-icon{
        margin-right: 10px;
    }
}

</style>